<template>
  <div class="login">
    <div class="login-container">
      <div class="scroll-container">
        <h1 class="title">三国模拟战</h1>
        
        <!-- <div class="decoration decoration-1"></div>
        <div class="decoration decoration-2"></div> -->
        
        <transition name="flip" mode="out-in">
          <div class="form-container" v-if="isLoginForm" key="login">
            <div class="form-group">
              <label class="form-label">将军姓名</label>
              <input 
                type="text" 
                class="form-input" 
                v-model="loginUsername" 
                placeholder="将军，请输入您的姓名"
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">密码</label>
              <input 
                type="password" 
                class="form-input" 
                v-model="loginPassword" 
                placeholder="请输入您的密码"
              >
            </div>
            
            <button v-loading="isLoading" class="btn" @click="login">登 录</button>
            
            <p class="switch-text">
              还没有账号？<a class="switch-link" @click="toggleForm">立即注册</a>
            </p>
          </div>
          
          <div class="form-container" v-else key="register">
            <div class="form-group">
              <label class="form-label">将军姓名</label>
              <input 
                type="text" 
                class="form-input" 
                v-model="registerUsername" 
                placeholder="将军，请输入您的姓名"
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">密码</label>
              <input 
                type="password" 
                class="form-input" 
                v-model="registerPassword" 
                placeholder="请输入您的密码"
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">确认密码</label>
              <input 
                type="password" 
                class="form-input" 
                v-model="registerConfirmPassword" 
                placeholder="请再次输入密码"
              >
            </div>
            
            <button class="btn" @click="register">注 册</button>
            
            <p class="switch-text">
              已有账号？<a class="switch-link" @click="toggleForm">立即登录</a>
            </p>
          </div>
        </transition>
        
        <div class="error-message">
          {{ errorMessage }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { userLogin,createUser } from '@/api/user'
import router from '@/router';

export default {
  mounted(){
  },
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const isLoginForm = ref(true);
    const isLoading = ref(false);
        const loginUsername = ref('');
        const loginPassword = ref('');
        const registerUsername = ref('');
        const registerPassword = ref('');
        const registerConfirmPassword = ref('');
        const errorMessage = ref('');
        
        
        const toggleForm = () => {
          isLoginForm.value = !isLoginForm.value;
          errorMessage.value = '';
        };
        
        const login = () => {
          if (!loginUsername.value || !loginPassword.value) {
            errorMessage.value = '将军！姓名和密码不能为空';
            return;
          }
          isLoading.value = true;
          // 模拟登录成功
          errorMessage.value = '正在进入三国世界...';
          setTimeout(()=>{
            userLogin({
              username:loginUsername.value,
              password:loginPassword.value,
            }).then((res)=>{
              console.log(res.data.data);
              sessionStorage.setItem('token',res.data.data.token);
              sessionStorage.setItem('userInfo',JSON.stringify(res.data.data));
              router.push({
                path:"/"
              })
            }).catch((err)=>{
              errorMessage.value = '登录失败！请将军检查姓名和密码...';
            }).finally(()=>{
              isLoading.value = false;
            })
          },1500)
          
        };
        
        const register = () => {
          if (!registerUsername.value || !registerPassword.value || !registerConfirmPassword.value) {
            errorMessage.value = '所有字段都必须填写';
            return;
          }
          
          if (registerPassword.value !== registerConfirmPassword.value) {
            errorMessage.value = '两次输入的密码不一致';
            return;
          }
          
          if (registerPassword.value.length < 6) {
            errorMessage.value = '密码长度不能少于6位';
            return;
          }
          isLoading.value = true;
          // 模拟注册成功
          errorMessage.value = `${registerUsername.value}将军注册中...`;
          setTimeout(() => {
            createUser({
              username:registerUsername.value,
              password:registerPassword.value,
            }).then((res)=>{
              console.log(res.data.data);
              isLoading.value = false;
              registerPassword.value = '';
              registerConfirmPassword.value = '';
              registerUsername.value = '';
              toggleForm();
            }).catch((err)=>{
              errorMessage.value = '注册失败！请稍后再试...';
            }).finally(()=>{
              
            })
          }, 1500);
        };
        
        return {
          isLoginForm,
          loginUsername,
          loginPassword,
          registerUsername,
          registerPassword,
          registerConfirmPassword,
          errorMessage,
          toggleForm,
          login,
          register,
          isLoading
        };
  },
}
</script>
<style lang="less" scoped>
.login{
  width: 100vw;
  height: 100vh;
  .login-container {
      width: 100%;
      max-width: 500px;
      perspective: 1000px;
      margin: 0 auto;
      margin-top: 25vh;
    }
    
    .scroll-container {
      background: #ffffff;
      border-radius: 12px;
      padding: 40px 30px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
      transform-style: preserve-3d;
      transition: transform 0.8s;
      border: 1px solid #e0e0e0;
    }
    
    .scroll-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 8px;
      background: linear-gradient(to right, #333, #555, #333);
      z-index: 1;
    }
    
    .scroll-container::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 8px;
      background: linear-gradient(to right, #333, #555, #333);
      z-index: 1;
    }
    
    .title {
      text-align: center;
      font-size: 3rem;
      margin-bottom: 30px;
      color: #333;
      letter-spacing: 3px;
      position: relative;
      font-weight: 600;
      text-transform: uppercase;
    }
    
    .title::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 3px;
      background: linear-gradient(to right, transparent, #333, transparent);
    }
    
    .form-container {
      position: relative;
      min-height: 300px;
    }
    
    .form-group {
      margin-bottom: 25px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 1.1rem;
      color: #555;
      font-weight: 500;
    }
    
    .form-input {
      width: 100%;
      padding: 14px 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      background: #fafafa;
      font-size: 1rem;
      color: #333;
      transition: all 0.3s;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .form-input:focus {
      outline: none;
      border-color: #888;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(100, 100, 100, 0.1);
    }
    
    .btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(to bottom, #444, #333);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 1.1rem;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 10px;
      letter-spacing: 1px;
      font-weight: 500;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .btn:hover {
      background: linear-gradient(to bottom, #555, #444);
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }
    
    .btn:active {
      transform: translateY(1px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .switch-text {
      text-align: center;
      margin-top: 20px;
      font-size: 1rem;
      color: #666;
    }
    
    .switch-link {
      color: #333;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
      margin-left: 5px;
      transition: all 0.3s;
      position: relative;
    }
    
    .switch-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #333;
      transition: width 0.3s;
    }
    
    .switch-link:hover::after {
      width: 100%;
    }
    
    .decoration {
      position: absolute;
      width: 70px;
      height: 70px;
      opacity: 0.1;
    }
    
    .flip-enter-active, .flip-leave-active {
      transition: opacity 0.5s, transform 0.8s;
    }
    
    .flip-enter-from, .flip-leave-to {
      opacity: 0;
      transform: rotateY(90deg);
    }
    
    .flip-enter-to, .flip-leave-from {
      opacity: 1;
      transform: rotateY(0deg);
    }
    
    .error-message {
      color: #d32f2f;
      text-align: center;
      margin-top: 15px;
      font-size: 1rem;
      min-height: 25px;
      font-weight: 500;
    }
    
    .theme-hint {
      text-align: center;
      margin-top: 20px;
      font-size: 0.9rem;
      color: #888;
      font-style: italic;
    }
    
    @media (max-width: 600px) {
      .title {
        font-size: 2.2rem;
      }
      
      .scroll-container {
        padding: 30px 20px;
      }
      
      .decoration {
        width: 50px;
        height: 50px;
      }
    }
}

</style>
